import classes from './TextHeader.module.css'
import {useSelector} from "react-redux";
import {useEffect, useRef} from "react";
import {useRouter} from "next/router";
import socket from '../../ws'

function TextHeader(){
    const myRef = useRef();
    const {me} = useSelector(state => state.user)
    const router = useRouter();
    useEffect(() => {
        myRef.current.innerHTML = me.avatar;
    })

    //登出
    function logout() {
        socket.close()
        router.push('/login')
    }

    return(
        <div className={classes.header}>
            <div className={classes.box}>
                <div className={classes.img} ref={myRef}>

                </div>
                <span>
                    {me.username}
                </span>
                <button className={classes.btn} onClick={logout}>退出登陆</button>
            </div>
        </div>
    )
}
export default TextHeader;